<template>
<!-- 朱玉豪 -->
  <div class="superlotto-balls">
    <div class="superlotto-balls-ball"  @click="generalChose(num)"  v-for="(num,index) in numarr" :key="index" @longpress="onlongpress(num)">
    <div class="superlotto-balls-ball-num"  :style="ballStyles(num)">
      <text class="superlotto-balls-ball-num-t" :style="text_default_style()"   v-if="!text(num)">{{formatNum(num)}}</text>
      <text class="chosednum" :style="text_chosed_style()"  v-if="text(num)">{{formatNum(num)}}</text>
      </div>
    <div class="superlotto-balls-ball-dan"  v-if="s_ballClass.indexOf(num) >= 0">
      <image class="dan-img" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/dan.png"></image>
      </div>
    </div>
  </div>
</template>

<script>
const modal = weex.requireModule("modal");
export default {
  data() { 
    return {
      Loop: null
    };
  },
  props: {
    numarr: {
      type: Number
    },
    ballClass: {
      //普选
      type: Array,
      default: []
    },
    s_ballClass: {
      //设胆
      type: Array,
      default: []
    },
    ballArea: {
      type: String
    },
    ballStyle: {
      type: Object
    },
    s_ballStyle: {
      type: Object
    },
    textstyle: {
      type: Object
    }
  },
  methods: {
    onlongpress (event) {
        console.log('onlongpress:', event)
          this.$emit("sendSpecialBall", event);
      },
    generalChose(item) {
      this.$emit("sendGeneralBall", item);
    },
    formatNum(num) {
      if (num < 10) return "0" + num;
      return num.toString();
    },
    send(a) {
      console.log(a);
    },
    ballStyles(item) {
      if (
        this.ballClass.indexOf(item) >= 0 ||
        this.s_ballClass.indexOf(item) >= 0
      ) {
        return this.ballStyle;
      }else{
        return {
          'background-color':'#ffffff',
           'border-width': '1px',
            'border-style': 'solid',
            'border-color': '#d5d5d5'
          }
      }
    },
    text(item) {
      if (
        this.ballClass.indexOf(item) >= 0 ||
        this.s_ballClass.indexOf(item) >= 0
      ) {
        return true;
      }
    },
    text_default_style(){
      return this.textstyle;
    },
    text_chosed_style(){
      return {color:'#ffffff'}
    }
  }
};
// #Usage
// <lottoball :numarr="lottoNum.g_one.num" :style="lottoNum.g_one.color"></lottoball>
// <lottoball :numarr="lottoNum.g_two.num" :style="lottoNum.g_two.color"></lottoball>
</script>

<style scoped>
.dan-img{
      height: 32px;
    width: 32px;
}
.chosednum {
  color: #ffffff;
  text-align: center;
  font-size: 32px;
}
.superlotto-balls-ball-dan {
  position: absolute;
  right: 5px;
    top: 0px;
  border-radius: 3px;
  font-size: 32px;
  font-weight: bold;
}
.superlotto-balls-ball {
  width: 98px;
  justify-content: center;
  flex-direction: row;
}
.superlotto-balls-ball-num-t {
  text-align: center;
  font-size: 32px;
  /* color: #fff; */
}
/* .red{
  color: #e70d0d;
}
.blue{
  color: #076BF2;
} */
.superlotto-balls-ball-num {
  font-family: Helvetica;
  height: 74px;
  width: 74px;
 
  border-radius: 50px;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background-color: #fff;
  font-family: Helvetica;
  margin-bottom: 11px;
}
.superlotto-balls {
  flex-direction: row;
  flex-wrap: wrap;
  padding-top: 32px;
  padding-bottom: 32px;
}
</style>


